<template>
    <view class="">
        <view class="card-section">
            <view class="acea-row row-middle">
                <image class="image" :src="memberinfo.userpic || '/static/images/my/mine_def_touxiang_3x.png'"></image>
                <view class="text">
                    <view class="name">{{memberinfo.nickname}}</view>
                    <view v-if="memberinfo.is_ever_level">永久SVIP会员</view>
                    <view v-else-if="memberinfo.is_money_level">SVIP会员 {{memberinfo.overdue_time | dateFormat}} 到期
                    </view>
                    <view v-else>会员等级：{{memberinfo.gname}}</view>
                </view>
            </view>
            <view class="acea-row row-between-wrapper info">
                <view v-if="memberinfo.gid">升级会员享受更多权益
                </view>
                <view v-else>开通即享会员权益</view>
                <view class="btn" @click="scrollToCard">{{memberinfo.gid ? '升级会员' : '开通会员'}}</view>
            </view>
        </view>
        <view class="right-section">
            <view class="section-hd acea-row row-center-wrapper">
                <view class="title acea-row row-center row-bottom"><text class="iconfont icon-huiyuan2"></text>VIP会员尊享权利
                </view>
            </view>
            <view class="section-bd acea-row row-between-wrapper">
                <view v-for="item in memberRights" :key="item.id" class="acea-row row-middle item">
                    <image class="image" :src="item.pic"></image>
                    <view class="text">
                        <view class="name">{{item.title}}</view>
                        <view>{{item.explain}}</view>
                    </view>
                </view>
            </view>
            
        </view>
        
        <view class="type-section" id="card">
            <!--<view class="title">
				<view class="bold">{{memberinfo.is_money_level ? '续费会员' : '开通会员'}}</view>
				<view>有效期至<text class="time">{{memberEndTime}}</text></view>
			</view>-->
            <!-- <scroll-view class="scroll" scroll-x="true"> -->
            <view v-for="item in memberauthgroup" :key="item.id" class="item" :class="{on: item.id === 	gid}" @click="checkGroup(item)">
                <view>{{item.title}}</view>
                <view class="new" style="font-size: 8px;">消费满<text style="font-size: 8px;" class="num">{{item.upgrade_consumption}}</text>升级</view>
                <view class="info">购买服务享受</view>
                <view class="discount">{{item.discount}}折</view>
            </view>
            <!-- </scroll-view> -->
            <view v-if="memberExplain" class="agree">
                <navigator class="link" url="/pages/annex/vip_clause/index" hover-class="none">购买即视为同意《<text class="mark">会员用户协议</text>》</navigator>
            </view>
            <!-- <view class="buy" @click="pay">立即支付</view> -->
            <!--<view class="cash">
				<text @click="drawMemberCard">点击兑换卡密</text>
			</view>-->
        </view>
        <view class="section-hd acea-row row-center-wrapper" style="margin-top: 20px;">
                <view class="title acea-row row-center row-bottom"><image  src="https://jiazheng.bjdengdeng.cn/addons/xm_mallv3/samos/public/static/huiyuan.png" mode="widthFix"></image></view>
            </view>
        <view :class="{ mask: popupShow }" @touchmove.prevent></view>
        <view class="popup" :class="{ on: popupShow }">
            <view class="cont">
                <view class="title">
                    <view class="line"></view>
                    <view class="name">激活会员卡</view>
                    <view class="line"></view>
                </view>
                <form class="form" @submit="checkForm">
                    <input v-model="account" class="input" name="account" type="text" placeholder="请输入卡号" placeholder-style="color:#C49D89" />
                    <input v-model="password" class="input" name="password" type="text" placeholder="请输入卡密" placeholder-style="color:#C49D89" password />
                    <button class="button" form-type="submit">确认激活</button>
                </form>
            </view>
            <button class="iconfont icon-guanbi2" @click="closePopup"></button>
        </view>
    </view>
</template>
<script>
import pay from '@/common/pay.js'
export default {
    data() {
        return {
            gid: '',
            amount: '',
            memberinfo: [],
            memberauthgroup: []
        }
    },
    onLoad: function (e) {
        let _this = this;
        _this.$util.getUserInfo(function (userInfo) {
            //Console.log("adfs");
            if (uni.getStorageSync('is_logout') != '1') {
                _this.$request.get('member.detail', {
                    samkey: (new Date()).valueOf()
                }).then(res => {
                    if (res.errno == 0) {
                        _this.memberinfo = res.data;
                    }
                });
            }
        });
        _this.$request.get('Memberauthgroup.list').then(res => {
            if (res.errno == 0) {
                _this.memberauthgroup = res.data;
                if (!_this.gid) {
                    _this.gid = _this.memberauthgroup[0].id;
                    _this.amount = _this.memberauthgroup[0].upgrademoney;
                }
            }
        });

    },
    methods: {
        pay() {
            const _this = this

            _this.$request.post('viporder.create', {
                gid: _this.gid
            }).then(res => {
                if (res.errno == 0) {
                    const redirectUrl = "/pagesA/my/vip_paid/index";
                    pay.wxpay('vip', res.data.total, res.data.id, redirectUrl);
                }
            });


        },
        checkGroup(item) {
            this.gid = item.id;
        },
        scrollToCard() {
            const query = uni.createSelectorQuery().in(this);
            query.select('#card').boundingClientRect(data => {
                uni.pageScrollTo({
                    scrollTop: data.top
                });
            }).exec();
        },
    }
}
</script>

<style lang="scss" scoped>
.acea-row {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.acea-row.row-middle {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.acea-row.row-top {
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.acea-row.row-bottom {
    -webkit-box-align: end;
    -moz-box-align: end;
    -o-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.acea-row.row-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.acea-row.row-right {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -o-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.acea-row.row-left {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -o-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.acea-row.row-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.acea-row.row-around {
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.acea-row.row-column-around {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.acea-row.row-column {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.acea-row.row-column-between {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.acea-row.row-center-wrapper {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.acea-row.row-between-wrapper {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.card-section {
    height: 250rpx;
    padding: 88rpx 66rpx 0;
    background: #ffffff
        url("")
        center/100% 100% no-repeat;

    .image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }

    .text {
        flex: 1;
        margin-left: 15rpx;
        font-size: 22rpx;
        line-height: 30rpx;
        color: #89735b;
    }

    .name {
        margin-bottom: 2rpx;
        font-weight: bold;
        font-size: 30rpx;
        line-height: 42rpx;
        color: #333333;
    }

    .info {
        margin-top: 74rpx;
        font-size: 24rpx;
        color: #ae5a2a;
    }

    .num {
        font-size: 36rpx;
    }

    .btn {
        width: 146rpx;
        height: 44rpx;
        border-radius: 22rpx;
        background-color: #ffffff;
        line-height: 44rpx;
        text-align: center;
    }
}

.right-section {
    background-color: #ffffff;

    .section-hd {
        padding-top: 34rpx;
        padding-bottom: 34rpx;

        .title {
            width: 543rpx;
            height: 90rpx;
            background: url("")
                center/cover no-repeat;
            font-weight: bold;
            font-size: 34rpx;
            line-height: 1.1;
            color: #89735b;
        }

        .iconfont {
            font-size: 34rpx;
            color: #89735b;
        }
    }

    .section-bd {
        padding: 0 30rpx 15rpx;

        .item {
            width: 338rpx;
            height: 140rpx;
            padding-left: 30rpx;
            border-radius: 6rpx;
            margin-bottom: 14rpx;
            background-color: #f7f7f7;
        }

        .image {
            width: 80rpx;
            height: 80rpx;
        }

        .text {
            flex: 1;
            min-width: 0;
            margin-left: 22rpx;
            overflow: hidden;
            white-space: nowrap;
            font-size: 24rpx;
            line-height: 33rpx;
            color: #9a856d;
        }

        .name {
            margin-bottom: 2rpx;
            font-size: 26rpx;
            line-height: 37rpx;
            color: #333333;
        }
    }
}

.type-section {
    margin-top: 20rpx;
    background-color: #ffffff;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    .title {
        padding: 26rpx 30rpx 0;
        font-size: 24rpx;
        color: #797979;

        .bold {
            display: inline-block;
            margin-right: 14rpx;
            font-weight: bold;
            font-size: 32rpx;
            line-height: 45rpx;
            color: #333333;

            + view {
                display: inline-block;
            }
        }

        .time {
            margin-left: 14rpx;
            font-size: 24rpx;
            color: #ae5a2a;
        }
    }

    .scroll {
        white-space: nowrap;
    }

    .item {
        width: 33.3333%;
        text-align: center;
        padding-top: 40rpx;
        width: 210rpx;
        height: 232rpx;
        border-radius: 12rpx;
        // margin: 32rpx 30rpx 30rpx 0;
        box-shadow: 0 3rpx 30rpx rgba(0, 0, 0, 0.1);
        font-size: 30rpx;
        line-height: 42rpx;
        color: #754e19;
		margin: 4px 10px;
        // margin-left: 30rpx;

        &.on {
            border: 3rpx solid #fcc282;
            background-color: #fef7ec;
        }
    }

    .new {
        margin-top: 22rpx;
        font-weight: 600;
        font-size: 26rpx;

        .num {
            font-size: 32rpx;
            line-height: 48rpx;
        }
    }

    .discount {
        margin-top: 13rpx;
        font-size: 24rpx;
    }

    .info {
        margin-top: 13rpx;
        font-size: 24rpx;
    }

    .agree {
        font-size: 22rpx;
        text-align: center;
        color: #797979;

        .link {
            display: inline-block;
        }

        .mark {
            color: #ae5a2a;
        }
    }

    .buy {
        height: 80rpx;
        border-radius: 12rpx;
        margin: 30rpx 30rpx 0;
        background: linear-gradient(90deg, #fee2b7 0%, #fdc383 100%);
        font-size: 30rpx;
        line-height: 80rpx;
        text-align: center;
        color: #5d3324;
    }

    .cash {
        padding-top: 26rpx;
        padding-bottom: 29rpx;
        font-size: 28rpx;
        text-align: center;
        color: #754e19;
    }
}

.coupon-section {
    margin-top: 20rpx;
    background-color: #ffffff;

    .section-hd {
        padding: 26rpx 30rpx 0;

        .title {
            font-weight: bold;
            font-size: 32rpx;
            line-height: 45rpx;
            color: #333333;
        }

        .link {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #89735b;

            .iconfont {
                margin-left: 6rpx;
                font-size: 14rpx;
            }
        }
    }

    .section-bd {
        white-space: nowrap;

        .item {
            display: inline-flex;
            width: 360rpx;
            height: 148rpx;
            margin: 26rpx 20rpx 30rpx 0;
            background: url("")
                center/cover no-repeat;

            &:first-child {
                margin-left: 30rpx;
            }

            &:last-child {
                margin-right: 30rpx;
            }

            &.gray {
                background-image: url("");

                .btn {
                    color: #9f9f9f;
                }

                .money {
                    color: #fff;

                    .num {
                        color: #fff;
                    }
                }

                .name {
                    color: #fff;
                }

                .text {
                    color: #9f9f9f;
                }

                .mark {
                    color: #a8a8a8;
                }
            }

            .btn {
                width: 52rpx;
                padding-right: 14rpx;
                padding-left: 14rpx;
                white-space: pre-wrap;
                font-size: 24rpx;
                color: #5d3324;
            }

            .text {
                max-width: 160rpx;
                margin-left: 14rpx;
            }

            .name {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-weight: bold;
                font-size: 28rpx;
                line-height: 40rpx;
                color: #5d3324;
            }

            .mark {
                display: inline-block;
                height: 35rpx;
                padding-right: 14rpx;
                padding-left: 14rpx;
                border-radius: 19rpx;
                margin-top: 6rpx;
                background-color: rgba(255, 255, 255, 0.3);
                font-size: 22rpx;
                line-height: 35rpx;
                color: #5f3426;
            }

            .money {
                max-width: 170rpx;
                text-align: center;
                font-size: 30rpx;
                font-weight: 800;
            }

            .num {
                position: relative;
                font-size: 54rpx;
                color: #333333;
            }
        }
    }
}

.goods-section {
    margin-top: 20rpx;
    background-color: #ffffff;

    .section-hd {
        padding: 26rpx 30rpx 0;
        font-weight: bold;
        font-size: 32rpx;
        line-height: 45rpx;
        color: #333333;
    }

    .section-bd {
        padding: 0 30rpx 0 7rpx;
        margin-top: 26rpx;

        .item {
            width: 215rpx;
            padding-bottom: 24rpx;
            margin-left: 23rpx;
        }

        .image {
            width: 215rpx;
            height: 215rpx;
            border-radius: 6rpx;
        }

        .name {
            margin-top: 10rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 26rpx;
            line-height: 37rpx;
            color: #333333;
        }

        .svip-price {
            margin-top: 6rpx;
            font-size: 26rpx;
            color: #333333;

            image {
                width: 60rpx;
                height: 24rpx;
                margin-left: 6rpx;
            }
        }

        .shop-price {
            margin-top: 4rpx;
            font-size: 20rpx;
            color: #999999;
        }
    }
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 600rpx;
    height: 634rpx;
    padding: 60rpx 40rpx 0;
    margin-top: -79rpx;
    background: url("")
        center/100% 100% no-repeat;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.3s;

    &.on {
        transform: translate(-50%, -50%) scale(1);
    }

    .cont {
        padding: 20rpx;
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 45rpx;
        padding-bottom: 45rpx;

        .line {
            width: 70rpx;
            height: 2rpx;
            background-color: #e6c3a5;
        }

        .name {
            margin-right: 25rpx;
            margin-left: 25rpx;
            font-size: 40rpx;
            color: #89735b;
        }
    }

    .form {
        .input {
            padding-right: 50rpx;
            padding-left: 50rpx;
            height: 98rpx;
            border-radius: 12rpx;
            margin-bottom: 35rpx;
            background: rgba(255, 187, 129, 0.15);
            font-size: 30rpx;
        }

        .button {
            height: 72rpx;
            border-radius: 36rpx;
            margin: 45rpx 80rpx 20rpx;
            background: #353841;
            font-size: 32rpx;
            line-height: 72rpx;
            color: #ffffff;
        }
    }

    .image {
        position: absolute;
        top: -57rpx;
        left: 50%;
        width: 146rpx;
        height: 114rpx;
        transform: translateX(-50%);
    }

    .iconfont {
        position: absolute;
        bottom: -110rpx;
        left: 50%;
        background: none;
        transform: translateX(-50%);
        font-size: 48rpx;
        line-height: 1;
        color: #ffffff;
    }
}
</style>
